<template>
  <el-card>
    <el-table
      :data="processList"
      border
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        prop="operationProcedureId"
        label="流程ID"
      ></el-table-column>
      <el-table-column
        prop="operationProcedureContent"
        label="流程目标"
      ></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.row.operationProcedureId)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="显示细节" :visible.sync="dialog.detailShow" width="50%">
      <el-steps :active="1">
        <el-step
          v-for="(item, index) in processDetailList"
          v-bind:key="index"
          :title="item.proDetailContent"
        ></el-step>
      </el-steps>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        detailShow: false,
      },
      processList: [],
      processDetailList: [],
    };
  },
  methods: {
    handleEdit(item) {
      this.dialog.detailShow = true;
      this.$axios.post("/processDetails/" + item).then((res) => {
        if (res.data.code == 200) {
          //   this.processList = res.data.data.list;
          this.processDetailList = res.data.data.list;
        }
      });
    },
    loadProcessList() {
      this.$axios.get("/process/select").then((res) => {
        if (res.data.code == 200) {
          this.processList = res.data.data.list;
        }
      });
    },
    createProcessProcedure() {
      this.$axios.post("/process").then((res) => {
        if (res.data.code == 200) {
          this.processDetailList = res.data.data.list;
        }
      });
    },
  },
  mounted() {
    this.loadProcessList();
  },
};
</script>
